<template>
  <div>
    <el-card class="box-card" :visible.sync="addDialogVisible">
      <el-breadcrumb separator="/" style="margin-bottom: 20px">
        <el-breadcrumb-item :to="{ path:'/welcome/furniture' }">办公家居申请
        </el-breadcrumb-item>
        <el-breadcrumb-item>申请列表</el-breadcrumb-item>
      </el-breadcrumb>
      <template>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="服务事项:">
            <el-select v-model="params.furnitureService" clearable placeholder="请选择服务事项">
              <el-option v-for="furniture in furnitureTypeList" :key="furniture.id" :value="furniture.id"
                         :label="furniture.furnituretypeName"/>
            </el-select>
          </el-form-item>
          <el-form-item label="服务地点:">
            <el-input placeholder="请输入服务地点" v-model="params.furnitureAddress" class="size"></el-input>
          </el-form-item>
          <el-form-item label="联系人:">
            <el-select v-model="params.furnitureUsrid" clearable placeholder="请选择联系人">
              <el-option v-for="sysUser in sysUserList" :key="sysUser.usrId" :value="sysUser.usrId"
                         :label="sysUser.usrName"/>
            </el-select>
          </el-form-item>
          <el-form-item label="发起时间:">
            <el-input placeholder="请输入发起时间" v-model="params.creationTime" class="size"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click=" search(0)">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!--审核-->
      <div>
        <el-dialog
          title="审核"
          :close-on-click-modal="false"
          :visible.sync="audit"
          :show-close="true" width="850px">
          <el-form :model="furniture"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="furniture"
                   :rules="rules"
          >
            <div style="align-content: center">
              <template>
                <el-radio-group v-model="furniture.furnitureStaticId" v-for="statics in staticList">
                  <el-radio :label="statics.staticId">{{statics.staticName}}</el-radio>
                </el-radio-group>
              </template>
            </div>
            <el-form-item>
              <el-button type="primary" @click="updateAudit()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 添加-->
      <div>
        <el-dialog
          title="家具申领"
          :close-on-click-modal="false"
          :visible.sync="addDialogVisible"
          :show-close="true" width="850px">
          <el-form :model="furniture"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="furniture"
                   :rules="rules"
          >
            <div style="align-content: center">
              <div><h3 style="margin-left: 270px;">请填写您需要服务的相关内容</h3></div>
              <el-form-item label="服务事项：" prop="furnitureService">
                <el-select v-model="furniture.furnitureService" placeholder="请选择服务事项">
                  <el-option v-for="furniture in furnitureTypeList" :key="furniture.id" :value="furniture.id"
                             :label="furniture.furnituretypeName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="服务地点：" prop="furnitureAddress">
                <el-input v-model="furniture.furnitureAddress" placeholder="请选择服务地点"></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="furnitureUsrId">
                <el-select v-model="furniture.furnitureUsrid" clearable placeholder="请选择联系人">
                  <el-option v-for="sysUser in sysUserList" :key="sysUser.usrId" :value="sysUser.usrId"
                             :label="sysUser.usrName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="联系手机：" prop="furniturePhone">
                <el-input v-model="furniture.furniturePhone" placeholder="请选择联系手机" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="服务描述" prop="furnitureDescribe">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请选择服务描述"
                  v-model="furniture.furnitureDescribe">
                </el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('furniture')">立即下单</el-button>
              <el-button @click="resetForm('furniture')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!--      修改-->
      <div>
        <el-dialog
          title="订单修改"
          :close-on-click-modal="false"
          :visible.sync="editDialogVisible"
          :show-close="true" width="850px">
          <el-form :model="furniture"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="furniture"
                   :rules="rules"
          >
            <div style="align-content: center">
              <div><h3 style="margin-left: 270px;">请填写您需要服务的相关内容</h3></div>
              <el-form-item label="服务事项：" prop="furnitureService">
                <el-select v-model="furniture.furnitureService" placeholder="请选择服务事项">
                  <el-option v-for="furniture in furnitureTypeList" :key="furniture.id" :value="furniture.id"
                             :label="furniture.furnituretypeName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="服务地点：" prop="furnitureAddress">
                <el-input v-model="furniture.furnitureAddress" placeholder="请选择服务地点"></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="furnitureUsrId">
                <el-select v-model="furniture.furnitureUsrid" clearable placeholder="请选择联系人">
                  <el-option v-for="sysUser in sysUserList" :key="sysUser.usrId" :value="sysUser.usrId"
                             :label="sysUser.usrName"/>
                </el-select>
              </el-form-item>
              <el-form-item label="联系手机：" prop="furniturePhone">
                <el-input v-model="furniture.furniturePhone" placeholder="请选择联系手机" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="服务描述" prop="furnitureDescribe">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请选择服务描述"
                  v-model="furniture.furnitureDescribe">
                </el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="updateSubmitForm('furniture')">立即修改</el-button>
              <el-button @click="resetForm('furniture')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div><span style="font-size:14px">状态：</span>
        <el-tag color="black" style="color: honeydew">未审批</el-tag>
        <el-tag color="green" style="color: honeydew">已完成</el-tag>
        <el-tag color="#124125" style="color: honeydew">已取消</el-tag>
        <el-tag color="#CA814D" style="color: honeydew">已作废</el-tag>
        <el-tag color="#00CED1" style="color: honeydew">部级通过</el-tag>
        <el-tag color="#8B4500" style="color: honeydew">部级未通过</el-tag>
        <el-tag color="#0000FF" style="color: honeydew">局级通过</el-tag>
        <el-tag color="red" style="color: honeydew">局级未通过</el-tag>
        <el-tag color="#747474" style="color: honeydew">处理中</el-tag>
        <el-button style="float: right" type="primary" @click="search(1)" icon="el-icon-message"
                   circle></el-button>

      </div>
      <el-table border :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="furnitureAddress" label="服务地点">
          <template slot-scope="scope">
            <span>{{scope.row.furnitureType.furnituretypeName }}{{scope.row.furnitureAddress}}</span>
          </template>
        </el-table-column>
        <el-table-column prop='furnitureDescribe' label="服务描述"></el-table-column>
        <el-table-column prop="department.departmentName" label="归属部门">
        </el-table-column>

        <el-table-column prop="sysUser.usrName" label="联系人"></el-table-column>
        <el-table-column prop="furniturePhone" label="联系电话"></el-table-column>
        <el-table-column prop="creationTime" label="发起时间">
        </el-table-column>
        <!--        <el-table-column v-if="meetingStatusId==1" prop="meetingStatusId" label="会议状态" >未回复</el-table-column>-->
        <el-table-column prop="furnitureStaticid" label="处理状态">
          <template slot-scope="scope">
            <span v-if="scope.row.furnitureStaticid == 41" style="color: black">未审批</span>
            <span v-if="scope.row.furnitureStaticid == 42" style="color:green">已完成</span>
            <span v-if="scope.row.furnitureStaticid == 43" style="color:#CA814D">已取消</span>
            <span v-if="scope.row.furnitureStaticid == 44" style="color:#747474">已作废</span>
            <span v-if="scope.row.furnitureStaticid == 45" style="color:#8B4500"> 部级通过</span>
            <span v-if="scope.row.furnitureStaticid == 46" style="color:red">部级未通过</span>
            <span v-if="scope.row.furnitureStaticid == 47" style="color:black">局级通过</span>
            <span v-if="scope.row.furnitureStaticid == 48" style="color:red">局级未通过</span>
            <span v-if="scope.row.furnitureStaticid == 49" style="color:#00CED1">处理中</span>
            <!--            //这里使用===还是==得看返回值是什么类型的，需不需要转换啥的，自己尝试一下就可以了，这样直接写也是行的，不过推荐最好使用===-->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="hover">
              <el-button type="info" plain>查看邮件</el-button>
              <el-button type="info" plain @click="showAddDialog(scope.row)">家具下单</el-button>
              <!--            <router-link to="/welcome/conferenceRoom/addConferenceRoom">会议安排</router-link>-->
              <el-button type="info" plain @click="showUpdateDialog(scope.row)">修改订单</el-button>
              <el-button type="info" plain @click="cancellation(scope.row)">取消订单</el-button>

              <el-button v-if=" scope.row.furnitureStaticid==null" type="info" plain @click="auditUpdate(scope.row)">
                审核
              </el-button>
              <el-button slot="reference">管理</el-button>
            </el-popover>
          </template>
        </el-table-column>

      </el-table>
      <template>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="params.total"
        >
        </el-pagination>
      </template>
    </el-card>
  </div>
</template>
<script>
  export default {
    'data' () {
      return {
        tableData: [],//列表信息
        furnitureType: [],//服务事项
        furnitureTypeList: [],//服务事项
        sysUserList: [],//用户信息
        staticList: [],//状态列表
        params: {
          pageSize: 5, // 每页显示5条记录
          pageIndex: 1, // 当前第几页
          total: 0, // 共几条记录去分页
          furnitureService: '',//通过服务事项查询
          furnitureAddress: '',//通过服务地点查询
          furnitureUsrid: '',//通过联系人查询
          creationTime: '',//通过发起时间查询
        },
        furniture: {//家具服务
          furnitureId: '',//办公家具申领id
          furnitureService: '',//服务事项
          furnitureAddress: '',//服务地点
          furnitureUsrid: '',//联系人
          furniturePhone: '',//联系手机
          furnitureDescribe: '',//服务描述
          furnitureDepid: '',//归属部门
          furnitureStaticId: '',//处理状态
          creationTime: '',//创建时间——发起时间
        },
        addDialogVisible: false,
        editDialogVisible: false,
        audit: false,
        formLabelWidth: '120px',
        //校验
        rules: {
          furnitureDescribe: [
            {
              required: true,
              message: '请输入服务描述',
              trigger: 'blur'
            }
          ],
          furnitureAddress: [
            {
              required: true,
              message: '请输入服务地点',
              trigger: 'blur'
            }
          ],
          furniturePhone: [
            {
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              pattern: /^1[34578]\d{9}$/,    //正则校验不用字符串
              message: '请填写正确的手机号码',
              trigger: 'blur'
            }
          ],
          furnitureService: [{
            required: true,
            message: '请选择服务事项',
            trigger: 'change',
          }],
          furnitureUsrid: [{
            required: true,
            message: '请选择联系人',
            trigger: 'change',
          }],
        }
      }
    }
    ,
    // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    'mounted' () {
      this.search()
    }
    ,
    methods: {
      'handleSizeChange' (val) {
        console.log(`每页 ${val} 条`)
        this.params.pageSize = val
        this.search()
      }
      ,
      'handleCurrentChange' (val) {
        console.log(`当前页: ${val}`)
        this.params.pageIndex = val
        this.search()
      }
      ,
      async 'search' (count) {
        const url = '/vueboot/furniture/list'
        const { data: res } = await this.$ajax.get(url, {
          params: {
            pageIndex: this.params.pageIndex,
            limit: this.params.pageSize,
            furnitureService: this.params.furnitureService,
            furnitureAddress: this.params.furnitureAddress,
            furnitureUsrid: this.params.furnitureUsrid,
            creationTime: this.params.creationTime,
            furnitureStaticid: count,
          },
        })
        console.log(res)
        this.tableData = res.furnitureIPage.records
        this.params.total = res.furnitureIPage.total
        this.furnitureType = res.furnitureIPage.records.furnitureType
        this.furnitureTypeList = res.furnitureTypeList
        this.sysUserList = res.sysUserList
        this.staticList = res.staticList
      }
      ,
      'showAddDialog' (row) {
        this.furniture.furnitureId = '',//办公家具申领id
          this.furniture.furnitureService = '',//服务事项
          this.furniture.furnitureAddress = '',//服务地点
          this.furniture.furnitureUsrid = '',//联系人
          this.furniture.furniturePhone = '',//联系手机
          this.furniture.furnitureDescribe = '',//服务描述
          this.furniture.furnitureDepid = '',//归属部门
          this.furniture.furnitureStaticId = '',//处理状态
          this.addDialogVisible = true
        this.furniture.furnitureDepid = row.department.id//归属部门

      }
      ,
      async 'submitForm' (furniture) {
        console.log(this.furniture.furnitureDepid)
        this.$refs['furniture'].validate((valid) => {
          if (valid) {
            const url = '/vueboot/furniture/seva'
            this.$ajax.post(url, this.furniture).then(res => {
              console.log(res.data)
              if (res.data == '1') {
                this.search()
                this.$message({
                  type: 'success',
                  message: '下单成功'
                })
                this.addDialogVisible = false
              } else {
                this.$message.error = '下单失败'
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
      ,
      'resetForm' () {//清空
        if (this.$refs['furniture'] !== undefined) {
          this.$refs['furniture'].resetFields()
        }
      }
      ,
      'filterTime' (time) {
        var date = new Date(time)
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        var d = date.getDate()
        d = d < 10 ? '0' + d : d
        var h = date.getHours()
        h = h < 10 ? '0' + h : h
        var minute = date.getMinutes()
        minute = minute < 10 ? '0' + minute : minute
        var s = date.getSeconds()
        s = s < 10 ? '0' + s : s
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
      }
      ,
      'showUpdateDialog' (row) {
        // this.$set(this.conferenceRoot, 'meetingTime', row.meetingTime)
        console.log(row)
        this.editDialogVisible = true
        this.furniture.furnitureId = row.furnitureId//办公家具申领id
        // this.furniture.furnitureService = row.furnitureType.furnituretypeName//服务事项
        this.furniture.furnitureService = row.furnitureService//服务事项
        this.furniture.furnitureAddress = row.furnitureAddress//服务地点
        this.furniture.furnitureUsrid = row.furnitureUsrid//联系人
        this.furniture.furniturePhone = row.furniturePhone//联系手机
        this.furniture.furnitureDescribe = row.furnitureDescribe//办公家具申领id
        this.furniture.furnitureDepid = row.department.id//归属部门
        this.furniture.furnitureStaticId = row.furnitureStaticId//处理状态
      }
      ,
      async 'updateSubmitForm' (furniture) {
        this.$refs['furniture'].validate((valid) => {
          if (valid) {
            const url = '/vueboot/furniture/seva'
            this.$ajax.post(url, this.furniture).then(res => {
              if (res.data == '1') {
                this.search()
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                this.editDialogVisible = false
              } else {
                this.$message.error = '修改失败'
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async 'cancellation' (row) {
        console.log(row.furnitureId)
        this.$confirm('确定取消订单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const url = '/vueboot/furniture/delFurniture'
          this.$ajax.get(url, {
            params: {
              furnitureId: row.furnitureId,
              isDel: 1
            }
          }).then(res => {
            console.log(res.data + '==============')
            if (res.data == '1') {
              this.$message({
                type: 'success',
                message: '取消成功'
              })
              this.search()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      auditUpdate (row) {
        this.furniture.furnitureId = row.furnitureId//办公家具申领id
        this.audit = true
      },
      async updateAudit () {
        console.log(this.furniture.furnitureStaticId)
        console.log(this.furniture.furnitureId)
        const url = '/vueboot/furniture/audit'
        this.$ajax.get(url, {
          params: {
            furnitureStaticId: this.furniture.furnitureStaticId,
            furnitureId: this.furniture.furnitureId
          }
        }).then(res => {
          if (res.data == '1') {
            this.search()
            this.$message({
              type: 'success',
              message: '审核成功'
            })
            this.audit = false
          } else {
            this.$message.error = '审核失败'
            this.search()
            this.$message({
              type: 'error',
              message: '审核失败'
            })
            this.audit = false
          }
        })
      },
    }
  }
</script>
<style>
  .size {
    width: 222px;
  }

  #add {
    position: relative;
    right: 0px;
  }

</style>
